&__carousel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  &__controll {
    width: 35px;
    height: 25px;
    cursor: pointer;
    background: url("../img/vector.svg") no-repeat center;
    border: none;
    outline: none;
    position: absolute;

    &:hover{
      fill: #f7931e;
    }

    &:first-child{
      left: -70px;
    }

    &:last-child{
      right: -70px;
      transform: rotate(180deg);
    }
  }

  &__line {
    display: flex;
    overflow-y: hidden;
    scroll-behavior: smooth;
    width: 100%;
    cursor: pointer;
    padding-bottom: 30px;
    width: 1162px;

    @include tablet{
      width: 768px;
    }

    &.dragging {
      cursor: grab;
      scroll-behavior: auto;

      & div {
        pointer-events: none;
      }
    }

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-track {
      background: #fff;
      border: 4px solid #0c1417;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #f7931e;
    }

    &__element {
      width: calc(100% / 3);

      &:not(:last-child) {
        margin-right: 30px;
      }

      @include tablet {
        width: calc(100% / 2);
      }

      @include phone {
        width: calc(100% / 1);
      }
    }
  }
}
